<template>
  <div class="single" @click="fun()">
    <img :src="littleimg" class="bookimg">
    <p class="text">{{littletext|textstr}}</p>
    <p class="price" v-html="price"></p>
  </div>
</template>

<script>
export default {
    props:['littleimg','littletext','price'],
    filters:{
        textstr(data){
            if(data.length>13){
                return data.slice(0,13)+"..."
            }else{
                return data
            }
        }
    },
    methods:{
        fun(){
            this.$router.push({path:'/details',query:{littleimg:this.littleimg,littletext:this.littletext,price:this.price}})
        }
    },
    created(){
      console.log(this.littleimg)
    }
}
</script>

<style scoped>
.single{
  background-color: #fff;
  border-radius: 0.08rem;
  margin-bottom:0.08rem  
}
.bookimg{
  width:0.9rem;
  height:1rem;
  display: block;
  margin-top:0.08rem;
}
.text{
  font-size:0.12rem;
  height:0.3rem;
  width:0.9rem;
  margin:auto;
  text-align: center;
}
.price{
    color:red;
    font-size:0.12rem;
    width:0.9rem;
    margin:auto;
}
</style>